<template>
  <div class="village-wrap" :style="{ height: mainHeight + 'px'}">
    <div class="main" flex="box:justify">
      <div class="main-left" flex="dir:top box:first">
        <!--小区描述-->
        <Alarm-detail class="main-top bg-color" :summary="this.summaryDetail"></Alarm-detail>
        <!--环境感知-->
        <EnvironmentAware :dept-id="this.$route.params.deptId"></EnvironmentAware>
      </div>
      <div class="main-container">
        <!--当前报警-->
        <Alarm-map class="bg-color" :dept-id="this.$route.params.deptId"></Alarm-map>
      </div>
      <div class="main-right" flex="dir:top box:first">
        <!--当前报警列表-->
        <Alarm-list class="main-top bg-color" :dept-id="this.$route.params.deptId"></Alarm-list>
        <!--地磁列表-->
        <GeoList class="bg-color" :dept-id="this.$route.params.deptId"></GeoList>
      </div>
    </div>
  </div>
</template>
<script>
import AlarmDetail from './components/alarmDetail.vue'
import EnvironmentAware from './components/environmentAware.vue'
import GeoList from './components/geoList.vue'
import AlarmMap from '../../../../components/village/alarmMap'
import AlarmList from '../../../../components/village/alarmList'

export default {
  name: 'pty_index',
  components: {
    AlarmDetail,
    AlarmMap,
    AlarmList,
    EnvironmentAware,
    GeoList
  },
  data () {
    return {
      mainHeight: 0,
      centerBoxWidth: 0,
      topPartHeight: 0,
      bottomPartHeight: 0,
      summaryDetail: {},
      camaraList: [],
      nameInfo: {
        deptName: '包装城',
        address: '宝安公路3705号'
      }
    }
  },
  mounted () {
    let gHeight = this.$base.getDocumentHeight() - this.$base.getConst('common', 'headerHeight')
    this.mainHeight = gHeight
    this.getMainData()
    this.getCamaraData()
  },
  methods: {
    getMainData () {
      let url = this.$base.getUrl('summaryByDeptId')
      let params = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId
        }
      }

      this.$store.dispatch('postForm', params).then((res) => {
        this.summaryDetail = res.result
      })
    },
    getCamaraData () {
      let url = this.$base.getUrl('getCamarasByDeptId')
      let params = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId
        }
      }

      this.$store.dispatch('postForm', params).then((res) => {
        this.camaraList = res.result
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .village-wrap {
    width: 100%;
    height: 100%;
    min-width: 1186px;
    min-height: 600px;
    background-color: #202835;
  }

  .bg-color {
    border-radius: 4px;
    background: rgba(43, 54, 72, 0.95);
  }

  .main {
    padding: 10px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    .main-left, .main-right {
      width: 20%;
      min-width: 290px;
      .main-top {
        margin-bottom: 10px;
        min-height: 300px;
        height: 54%;
      }
    }
    .main-container {
      margin: 0 10px;
    }
    .quality-box {
      margin-bottom: 0;
    }
  }
</style>
